<template>
  <div class="scenario-detail-wrapper">
    <div class="container">
      <div class="interweaving-lines"></div>
      <div class="floating-elements">
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        <div class="floating-element"></div>
      </div>

      <div class="content">
        <div class="header">
          <button class="back-btn" @click="handleBackClick">
            <i class="fas fa-arrow-left"></i>
          </button>
          <div>
            <div class="scenario-title">场景一</div>
            <div class="scenario-subtitle">组织变革引爆隐性危机的王静</div>
          </div>
        </div>

        <div class="content-box">
          <div class="content-title">
            <i class="fas fa-exclamation-triangle"></i>
            案例描述
          </div>
          <div class="content-text">
            <p>
              由于组织变革，公司决定优化一批员工。当HR宣读优化名单时，王静突然失控，大声哭泣，会议被迫停止。
            </p>
            <p>
              一周后，王静提交了请假申请，附件是医院的诊断：持续失眠、情绪显著低落、伴有中度抑郁症状。
            </p>
            <p>公司管理层对此措手不及，不知道接下来如何处理。</p>
          </div>
        </div>

        <div class="buttons">
          <button class="btn btn-back" @click="handleReturnClick">
            <i class="fas fa-arrow-left"></i>
            返回
          </button>
          <button class="btn btn-action" @click="handleActionClick">
            进入功能体验
            <i class="fas fa-arrow-right"></i>
          </button>
        </div>

        <div class="footer">组织心理风险管理系统 - 场景分析</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ScenarioDetail",
  methods: {
    handleBackClick(event) {
      this.animateButton(event.target.closest(".back-btn"));
      setTimeout(() => {
        this.$router.go(-1);
      }, 200);
    },

    handleReturnClick(event) {
      this.animateButton(event.target.closest(".btn-back"));
      setTimeout(() => {
        this.$router.go(-1);
      }, 200);
    },

    handleActionClick(event) {
      this.animateButton(event.target.closest(".btn-action"));
      setTimeout(() => {
        this.$router.push("/trial/home");
      }, 200);
    },

    animateButton(button) {
      if (!button) return;

      const originalTransform = button.style.transform;

      if (button.classList.contains("back-btn")) {
        button.style.transform = "translateY(-50%) scale(0.95)";
      } else {
        button.style.transform = "scale(0.98)";
      }

      setTimeout(() => {
        button.style.transform = originalTransform;
      }, 200);
    },
  },
};
</script>

<style scoped>
.scenario-detail-wrapper {
  background: linear-gradient(135deg, #b0d4f2 0%, #f5d1e0 100%);
  color: #2d467b;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

.container {
  width: 80%;
  /* height: 667px; */
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 24px;
  box-shadow: 0 15px 40px rgba(85, 145, 220, 0.12);
  padding: 30px 25px;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.container::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
      circle at 30% 30%,
      rgba(178, 212, 242, 0.2) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgba(245, 209, 224, 0.2) 0%,
      transparent 50%
    );
  z-index: 0;
}

.content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.back-btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(107, 161, 228, 0.7);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(85, 145, 220, 0.2);
  transition: all 0.3s ease;
}

.back-btn:hover {
  transform: translateY(-50%) scale(1.1);
}

.scenario-title {
  font-weight: bold;
  font-size: 18px;
  color: #2d467b;
  line-height: 1.4;
}

.scenario-subtitle {
  font-size: 14px;
  color: #4a7bc8;
  margin-top: 5px;
  opacity: 0.8;
}

.content-box {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 20px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(85, 145, 220, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  height: auto;
  min-height: 180px;
  margin-bottom: 20px;
}

.content-title {
  font-size: 16px;
  font-weight: bold;
  color: #2d467b;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.content-title i {
  margin-right: 8px;
  color: #6ba1e4;
}

.content-text {
  font-family: "KaiTi", "STKaiti", serif;
  font-size: 15px;
  line-height: 1.6;
  color: #2d467b;
}

.content-text p {
  margin-bottom: 15px;
}

.buttons {
  display: flex;
  gap: 15px;
  margin-top: 5px;
}

.btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(85, 145, 220, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-back {
  background: rgba(255, 255, 255, 0.7);
  color: #4a7bc8;
  border: 1px solid rgba(107, 161, 228, 0.3);
}

.btn-action {
  background: linear-gradient(
    to right,
    rgba(107, 161, 228, 0.7),
    rgba(74, 123, 200, 0.7)
  );
  color: white;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(85, 145, 220, 0.25);
}

.floating-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.floating-element {
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: float 15s infinite linear;
}

.floating-element:nth-child(1) {
  width: 12px;
  height: 12px;
  top: 15%;
  left: 10%;
  animation-delay: 0s;
}

.floating-element:nth-child(2) {
  width: 8px;
  height: 8px;
  top: 75%;
  left: 15%;
  animation-delay: 2s;
}

.floating-element:nth-child(3) {
  width: 16px;
  height: 16px;
  top: 40%;
  left: 85%;
  animation-delay: 4s;
}

.floating-element:nth-child(4) {
  width: 6px;
  height: 6px;
  top: 85%;
  left: 80%;
  animation-delay: 6s;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(180deg);
  }
  100% {
    transform: translateY(0) rotate(360deg);
  }
}

.interweaving-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.1;
  background: linear-gradient(
      45deg,
      transparent 48%,
      #6ba1e4 49%,
      #6ba1e4 51%,
      transparent 52%
    ),
    linear-gradient(
      -45deg,
      transparent 48%,
      #f5a9c5 49%,
      #f5a9c5 51%,
      transparent 52%
    );
  background-size: 40px 40px;
}

.footer {
  margin-top: 15px;
  color: #4a7bc8;
  font-size: 12px;
  opacity: 0.7;
}
</style>
